<template>
  <div style="text-align: center;">
    <div id="top-underline"></div>
    <div id="main" class="cl">
      <div id="main-top" class="cl">
        <div class="lfloat mt">
          &emsp;&emsp;用户登录
        </div>
      </div>
    </div>

    <div id="main-main">
      <div style="height: 50px;"></div>
      <a @click="pass=true,code=false">密码登录</a>
      <span style="margin-left: 10px;margin-right: 10px;"> | </span>
      <a @click="pass=false,code=true">验证码登录</a><br><br><br>
      <!-- <a href="#/register" style="text-decoration: none;color: steelblue;margin-left: 300px;">去注册</a> -->
      <div v-if="pass">
        <el-input style="margin-top: 20px;" clearable placeholder="请输入用户名" v-model="admin.adminName">
          <template slot="prepend">用户名：</template>
        </el-input><br>
        <el-input placeholder="请输入密码" clearable v-model="admin.adminPass" show-password>
          <template slot="prepend">密码：</template>
        </el-input><br>
        <el-row>
          <el-button @click="adminLogin" type="primary" plain>登录</el-button>
        </el-row>
      </div>
      <div v-if="code">
        <el-input placeholder="请输入电话号码" clearable style="margin-top: 20px;" v-model="admin.adminPhone">
          <template slot="prepend">手机号：</template>
        </el-input><br>
        <el-input placeholder="请输入验证码" clearable style="margin-left: 150px;" v-model="admin.adminCode">
          <template slot="prepend">验证码：</template>
        </el-input>
        <el-button @click="sendCode" :disabled="isSending || countdown > 0">
          {{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
        </el-button>
        <el-row>
          <el-button @click="loginByCode" type="primary" plain>登录</el-button>
        </el-row>
      </div>
    </div>
    <div>
      <div>
        <div class="text1 b">
          <a href="#">关于我们</a>
          &emsp;|&emsp;
          <a href="#">联系我们</a>
          &emsp;|&emsp;
          <a href="#">人才招聘</a>
          &emsp;|&emsp;
          <a href="#">商家入驻</a>
          &emsp;|&emsp;
          <a href="#">营销中心</a>
          &emsp;|&emsp;
          <a href="#">手机蜗牛</a>
          &emsp;|&emsp;
          <a href="#">友情链接</a>
          &emsp;|&emsp;
          <a href="#">销售联盟</a>
          &emsp;|&emsp;
          <a href="#">蜗牛社区</a>
          &emsp;|&emsp;
          <a href="#">蜗牛公益</a>
        </div>
        <div class="b">
          版权所有 © 成都蜗牛创想职业技能培训学校有限公司
        </div>
        <div class="b">
          蜀IPC备19000433号-3
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminLogin',
  data () {
    return {
      admin:{},//登录参数
      pass:true,
      code:false,
      countdown: 0,
      isSending: false
  }
  },
  methods:{
    /**
     * 账号密码登录
     */
    adminLogin(){
      this.$http.post("/admin/adminAccount/adminLogin",this.admin).then(resp=>{
        this.$message({
          message: resp.data.message,
          type: 'info'
        });
        if(resp.data.code==200){
          let token = resp.headers.token
          location.href="#/goods"
          console.log(token)
          this.admin={}
        }
      })
    },
    /**
     * 验证码登录
     */
    loginByCode(){
      this.$http.post("/admin/adminAccount/adminCodeLogin",this.admin).then(resp=>{
        this.$message({
          message: resp.data.message,
          type: 'info'
        });
        if(resp.data.code==200){
          let token = resp.headers.token
          location.href="#/goods"
          console.log(token)
          this.admin={}
        }
      })
    },
    /**
     * 发送登录验证码
     */
    sendCode() {
      if (this.countdown > 0 || this.isSending) {
        return;
      }
      this.isSending = true;
      this.startCountdown();
      setTimeout(() => {
        // 假设发送成功后将isSending重置为false
        this.isSending = false;
      }, 1000); // 这里使用2秒的延迟来模拟发送过程，你需要替换为实际的发送逻辑
      this.$http.get("/admin/adminAccount/sendAdminLoginCode",{
        params:{
          adminPhone:this.admin.adminPhone
        }
      }).then(resp=>{
        if(resp.data.code==200){
          this.$message({
                    message: '发送成功',
                    type: 'success'
                  });
        }else{
           this.$message.error(resp.data.message);
        }
      })
    },
      startCountdown() {
        this.countdown = 60;
        const timer = setInterval(() => {
          this.countdown--;
          if (this.countdown <= 0) {
            clearInterval(timer);
          }
        }, 1000);
      },
  }
}
</script>

<style scoped>
  .el-input{
    width: 400px;
    margin-bottom: 40px;
  }
  .el-button{
    height: 35px;
    width: 200px;
    margin-top: 30px;
  }
  #main-main {
    width: 90%;
    height: 450px;
    border: #DCDCDC 1px solid;
    margin-left: 70px;
    text-align: center;
  }
  .b {
    text-align: center;
    color: #A9A9A9;
    font-size: 10px;
    margin-top: 20px;
  }
  #top-underline {
    width: 90%;
    height: 2px;
    background-color: #A52A2A;
    margin-left: 70px;
  }
  #main-top {
    width: 90%;
    height: 30px;
    background-color: #DCDCDC;
    margin-top: 15px;
    margin-left: 70px;
  }
  a {
    text-decoration: none;
    color: #A9A9A9;
  }
  .lfloat {
    float: left;
  }

  .rfloat {
    float: right;
  }

  .cl::after {
    content: '';
    display: block;
    clear: both;
  }
  .mt {
    font-size: 14px;
    font-weight: bold;
    color: grey;
    margin-top: 5px;
  }
</style>
